<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<title>添加事件</title>
	<link rel="stylesheet" href="/layui/css/layui.css">
	<style type="text/css">
		.pushSOP_main_contaienr{
			width: 571px;
			margin: 0 auto;
			padding: 32px 20px 32px 20px;
			background: #fff;
		}
		.pushSOP_title{
			font-size: 17px;
			width: 100%;
			margin-top: 2px;
			font-weight: 400;
			line-height: 24px;
			letter-spacing: 1px;
		}
		.pushSOP_button_content{
			display: flex;
			justify-content: flex-end;
			flex: 1;
			align-items: center;
		}
		.publishPopup_textLeft{
			text-align: left;
		}
		/*续费部分*/
		.RenewalsPopup_main_container{
			padding: 14px 30px;
		}
		.RenewalsPopup_mainDetail_container{

		}
		.RenewalsPopup_mainDetail_container li{
			display: flex;
			align-items: center;
			margin-bottom: 30px;
		}
		.RenewalsPopup_mainDetail_container li:last-child{
			margin-bottom: 0;
		}
		.RenewalsPopup_mainDetail_ListTitle{
			font-size: 14px;
			color: #606266;
			width: 60px;
			text-align: right;
			margin-right: 12px;
		}
		.RenewalsPopup_mainDetail_ListPrice{
			color: #e6a23c;
			font-size: 16px;
		}
		/* tips star*/
		.publishPopup_tips_contianer{
			background: #f4f4f5;
			border-radius: 5px;
			overflow: hidden;
			padding: 12px 24px;
			margin-top: 30px;
		}
		.publishPopup_tips_contianer h4{
			font-size: 14px;
			color: #909399;
			font-weight: bold;
			margin-bottom: 10px;
		}
		.publishPopup_tips_contianer p{
			font-size: 12px;
			color: #909399;
		}
		/* tips end*/
		/*步进器 star*/
		.RenewalsPopup_mainDetail_stepper_container{
			display: flex;
			align-items: center;
		}
		.RenewalsPopup_mainDetail_stepper_content{
			display: flex;
			align-items: center;
			border: 1px solid #ececec;
			border-radius: 3px;
			overflow: hidden;
		}
		.RenewalsPopup_mainDetail_stepper_content i{
			background: #f5f7fa;
			font-size: 14px;
			height: 38px;
			line-height: 38px;
			width: 38px;
			text-align: center;
			cursor: pointer;
		}
		.RenewalsPopup_mainDetail_stepper_content i:first-child{
			
		}
		.RenewalsPopup_mainDetail_stepper_content i:last-child{
			
		}
		.RenewalsPopup_mainDetail_stepper_content input{
			background: #fff;
			border-top: none;
			border-bottom: none;
			border-left: 1px solid #ececec;
			border-right: 1px solid #ececec;
			font-size: 14px;
			height: 38px;
			line-height: 38px;
			width: 98px;
			text-align: center;
		}
		.RenewalsPopup_mainDetail_stepper_container span{
			font-size: 14px;
			margin-left: 12px;
			color: #606266;
		}
		/*步进器 end*/
		/**/

	</style>
</head>
<body>
	<form class="layui-form" action="">
		<div class="pushSOP_main_contaienr">
			<h2 class="pushSOP_title publishPopup_textLeft">套餐购买</h2>
			<div class="publishPopup_tips_contianer">
				<h4>提示</h4>
				<p>购买套餐时间将会追加在所拥有的套餐之后</p>
			</div>
			<div class="RenewalsPopup_main_container">
				<ul class="RenewalsPopup_mainDetail_container">
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">账户余额</span>
						<b class="RenewalsPopup_mainDetail_ListPrice">￥<span id="balance">{$ma->yue}</span></b>
					</li>
					{if !$mu->isyg}
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">代理折扣</span>
						<b class="RenewalsPopup_mainDetail_ListPrice"><span id="zsjiagebiao">{$zsjiagebiao}</span>折</b>
					</li>
					{/if}
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle" onclick="fyjs()">套餐类型</span>
						<div class="RenewalsPopup_mainDetail_select_container">
							<select id="city" lay-verify="required" lay-filter="setMeal">
							    <option value=""></option>
								{loop $yhlx_arr as $key=>$rank}
							    <option value="{$key}">{$rank}</option>
								{/loop}
							</select>
						</div>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">套餐单价</span>
						<b class="RenewalsPopup_mainDetail_ListPrice" id="price">￥0</b>
					</li>
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">购买时长</span>
						<td valign="middle"><input type="text" value="{date('Y-m-d',strtotime($ua->mendtime))}" style="width:150px;height:30px;" id="test1" placeholder="请选择日期"></td>
						<input type="hidden" id="time" value="{date('Y-m-d',strtotime($ua->mendtime))}">
					</li>
					<input type="hidden" id="hidd">
					<li>
						<span class="RenewalsPopup_mainDetail_ListTitle">套餐总价</span>
						<b class="RenewalsPopup_mainDetail_ListPrice" id="setMealPrice">￥0</b>
					</li>
					<li id="spreads" style="display: none;">
						<span class="RenewalsPopup_mainDetail_ListTitle">说明</span>
						<b class="RenewalsPopup_mainDetail_ListPrice">需要补齐差价￥<span id="spread">0</span></b>
					</li>
				</ul>
			</div>
			<div class="layui-form-item">
				<div class="pushSOP_button_content">
					<button type="button" class="layui-btn layui-btn-primary" onclick="text('10')">取消</button>
					<button type="button" class="layui-btn layui-btn-normal">购买</button>
				</div>
			</div>
		</div>	
	</form>
	<script src="/cdn/jquery.js"></script>
	<script src="/layui/layui.js"></script>
	<script>
	//表单
	layui.use('form', function(){
		var form = layui.form;

	  //监听提交
	  form.on('submit(formDemo)', function(data){
	  	layer.msg(JSON.stringify(data.field));
	  	return false;
	  });
	  form.on("select(setMeal)", function(data){
	       	index();
	  });
	});
</script>
<script type="text/javascript">
	function index(){
		let times = $('#test1').val().split("-");
	       	let time = $('#time').val().split("-");
	       	var price = $("#city").val();
       		$("#price").text("");
   			$("#setMealPrice").text("");
	       	if(!price){
	       		var prices = "0";
				$("#price").append("￥0");
				$("#setMealPrice").append("￥0");
	       	}else{
	       		ajax(location.href,{ price_id:price},function(m){
	       			if(times[0] == time[0] && times[1] == time[1] && times[2] == time[2]){
						$("#price").append("￥"+"<span id='span_price'>"+m+"</span>");
						$("#setMealPrice").append("￥0");
		       		}else{
		       			var lx = parseInt($('#city').val());
		       			$("#price").append("￥"+"<span id='span_price'>"+m+"</span>");
		       			var myfy = parseInt($('#span_price').text());
		       			var present_price = myfy/365;//日价格
		       			var sum_price = present_price*{$day_time};
		       			var spread_price = parseInt(sum_price-{$return_price});//之前的差价
		       			ajax(location.href,{ time:$('#time').val(),times:$('#test1').val()},function(res){
		       				$("#hidd").val(res);
		       				if($("#zsjiagebiao").text()){
		       					var discount_price = parseInt(res*present_price*{$zsjiagebiao})/10;
		       					var discount_prices = parseInt((res*present_price+spread_price)*{$zsjiagebiao})/10;
		       				}else{
		       					var discount_price = parseInt(res*present_price);
		       					var discount_prices = parseInt(res*present_price+spread_price);
		       				}
		       				$("#setMealPrice").append("￥"+"<span id='span_zong'>"+discount_price+"</span>");
		       				$("#spreads").attr("style","display:none;");
			       			if(lx>{$ua->level_id}&&{$check}==1){
			       				$("#spreads").attr("style","none");
			       				$("#spread").text(spread_price);
   								$("#setMealPrice").text("");
			       				$("#setMealPrice").append("￥"+"<span id='span_zong'>"+discount_prices+"</span>");
			       			}
		       			})
	       			}
				})
	       	}
	}
</script>
<script src="/cdn/jquery.js"></script>
<script type="text/javascript">
	$(".layui-btn-normal").on("click",function(){
		let id = $("#city").val();	//
		let balance = $("#balance").text(); //账户余额套餐id
		let xfDays = $('#hidd').val(); // 年数 分月数
		let spread = $("#spread").text();
		let span_zong = $("#span_zong").text();
		span_zong = parseInt(span_zong);
		balance = parseInt(balance);
		let sjPrice = parseInt(spread)+parseInt(span_zong);
		let dan_price = $('#span_price').text(); // 年数 分月数
		if(!id){
			tusi("请先选择套餐类型");
			return false;
		}
		if(balance < span_zong){
			tusi("你的账户余额不足，请充值");
			return false;
		}
		ajax(location.href,{ xfDays:xfDays,lx:id,sjPrice:span_zong},function(m){
			if(m=='no'){
				tusi('请选择时间');
			}
			if(m=='tno'){
				tusi('平台备用金不足，请联系管理员');
			}
			if(m=='ok'){
				tusi('升级成功');
				setTimeout(function(){
					parent.location.href = parent.location.href;
				},1500);
			}
		});
	})
	// 日期
		layui.use('laydate', function(){
			var laydate = layui.laydate;
			//执行一个laydate实例
			let id = $("#city").val();	//套餐id
			laydate.render({
				elem: '#test1' //指定元素
				,type: 'date'
				,min: "{date('Y-m-d',strtotime($ua->mendtime))}"
				,showBottom: false
				,done: function(value, date, endDate){
					index();
				 }
			});
		});
</script>
</body>
</html>